<template>
  <div class="fill-height">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="header-content">
        <el-button
          icon
          @click="$router.go(-1)"
          class="back-btn"
        >
          <el-icon><ArrowLeft /></el-icon>
        </el-button>
        <h1 class="page-title">
          <el-icon class="title-icon"><Monitor /></el-icon>
          线程池监控
        </h1>
      </div>
    </div>

    <!-- 概览卡片 -->
    <el-row :gutter="16" class="overview-row">
      <el-col :span="6">
        <el-card class="overview-card">
          <div class="overview-item">
            <div class="overview-icon executor-icon">
              <el-icon><Connection /></el-icon>
            </div>
            <div class="overview-content">
              <div class="overview-number">{{ overview.executorCount || 0 }}</div>
              <div class="overview-label">执行器数量</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="overview-card">
          <div class="overview-item">
            <div class="overview-icon app-icon">
              <el-icon><Grid /></el-icon>
            </div>
            <div class="overview-content">
              <div class="overview-number">{{ overview.appCount || 0 }}</div>
              <div class="overview-label">应用数量</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="overview-card">
          <div class="overview-item">
            <div class="overview-icon task-icon">
              <el-icon><Clock /></el-icon>
            </div>
            <div class="overview-content">
              <div class="overview-number">{{ overview.totalTasks || 0 }}</div>
              <div class="overview-label">总任务数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="overview-card">
          <div class="overview-item">
            <div class="overview-icon memory-icon">
              <el-icon><Cpu /></el-icon>
            </div>
            <div class="overview-content">
              <div class="overview-number">{{ overview.avgMemoryUsage || 0 }}%</div>
              <div class="overview-label">平均内存使用率</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 统计图表区域 -->
    <el-row :gutter="16" class="chart-row">
      <el-col :span="12">
        <el-card class="chart-card" header="执行器状态分布">
          <template #header>
            <div class="card-header">
              <span>执行器状态分布</span>
              <el-date-picker
                v-model="statisticsDate"
                type="date"
                placeholder="选择日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                @change="loadStatisticsData"
              />
            </div>
          </template>
          <div class="chart-container">
            <v-chart :option="executorStatusChartOption" style="height: 300px;" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="chart-card" header="任务执行统计">
          <template #header>
            <div class="card-header">
              <span>任务执行统计</span>
              <el-button
                type="primary"
                size="small"
                @click="loadStatisticsData"
                :loading="statisticsLoading"
              >
                <el-icon><Refresh /></el-icon>
                刷新
              </el-button>
            </div>
          </template>
          <div class="chart-container">
            <v-chart :option="taskStatisticsChartOption" style="height: 300px;" />
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 小时统计图表 -->
    <el-card class="chart-card" header="24小时执行趋势">
      <template #header>
        <div class="card-header">
          <span>24小时执行趋势</span>
          <el-select v-model="selectedAppForHourly" placeholder="选择应用" clearable @change="loadStatisticsData">
            <el-option
              v-for="app in appList"
              :key="app"
              :label="app"
              :value="app"
            />
          </el-select>
        </div>
      </template>
      <div class="chart-container">
        <v-chart :option="hourlyChartOption" style="height: 400px;" />
      </div>
    </el-card>

    <!-- 实时监控 -->
    <el-card class="monitor-card" header="实时监控">
      <template #header>
        <div class="card-header">
          <span>实时监控</span>
          <el-space>
            <el-select v-model="selectedExecutor" placeholder="选择执行器" clearable @change="loadLatestData">
              <el-option
                v-for="executor in executorList"
                :key="executor"
                :label="executor"
                :value="executor"
              />
            </el-select>
            <el-button
              type="primary"
              @click="loadLatestData"
              :loading="loading"
            >
              <el-icon><Refresh /></el-icon>
              刷新
            </el-button>
          </el-space>
        </div>
      </template>

      <el-table
        :data="latestData"
        :loading="loading"
        style="width: 100%"
        row-key="id"
        size="default"
      >
        <el-table-column prop="registerKey" label="执行器标识" />
        <el-table-column prop="appName" label="应用名称" />
        <el-table-column prop="monitorTime" label="监控时间" />
        <el-table-column prop="poolSize" label="当前线程数" width="120" />
        <el-table-column prop="activeCount" label="活跃线程数" width="120" />
        <el-table-column prop="queueSize" label="队列大小" width="100" />
        <el-table-column prop="completedTaskCount" label="已完成任务" width="120" />
        <el-table-column prop="taskCount" label="总任务数" width="100" />
        <el-table-column prop="memoryUsagePercent" label="内存使用率" width="120">
          <template #default="{ row }">
            <el-progress
              :percentage="row.memoryUsagePercent"
              :color="getMemoryColor(row.memoryUsagePercent)"
              :stroke-width="8"
            />
          </template>
        </el-table-column>
        <el-table-column prop="averageTaskExecutionTimeMs" label="平均执行时间(ms)" width="150" />
        <el-table-column label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row)">
              {{ getStatusText(row) }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 历史数据查询 -->
    <el-card class="history-card" header="历史数据查询">
      <template #header>
        <div class="card-header">
          <span>历史数据查询</span>
          <el-button
            type="danger"
            @click="showCleanDialog"
          >
            <el-icon><Delete /></el-icon>
            清理历史数据
          </el-button>
        </div>
      </template>

      <!-- 搜索条件 -->
      <el-form :model="searchForm" inline class="search-form">
        <el-form-item label="执行器标识">
          <el-select v-model="searchForm.registerKey" placeholder="选择执行器" clearable>
            <el-option
              v-for="executor in executorList"
              :key="executor"
              :label="executor"
              :value="executor"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="应用名称">
          <el-select v-model="searchForm.appName" placeholder="选择应用" clearable>
            <el-option
              v-for="app in appList"
              :key="app"
              :label="app"
              :value="app"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="dateRange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadHistoryData" :loading="historyLoading">
            <el-icon><Search /></el-icon>
            查询
          </el-button>
          <el-button @click="resetHistorySearch">
            <el-icon><Refresh /></el-icon>
            重置
          </el-button>
        </el-form-item>
      </el-form>

      <!-- 历史数据表格 -->
      <el-table
        :data="historyData"
        :loading="historyLoading"
        style="width: 100%"
        row-key="id"
        size="default"
      >
        <el-table-column prop="registerKey" label="执行器标识" />
        <el-table-column prop="appName" label="应用名称" />
        <el-table-column prop="monitorTime" label="监控时间" />
        <el-table-column prop="corePoolSize" label="核心线程数" width="120" />
        <el-table-column prop="maximumPoolSize" label="最大线程数" width="120" />
        <el-table-column prop="poolSize" label="当前线程数" width="120" />
        <el-table-column prop="activeCount" label="活跃线程数" width="120" />
        <el-table-column prop="queueSize" label="队列大小" width="100" />
        <el-table-column prop="queueRemainingCapacity" label="队列剩余容量" width="130" />
        <el-table-column prop="completedTaskCount" label="已完成任务" width="120" />
        <el-table-column prop="taskCount" label="总任务数" width="100" />
        <el-table-column prop="usedMemoryMb" label="已用内存(MB)" width="130" />
        <el-table-column prop="memoryUsagePercent" label="内存使用率" width="120">
          <template #default="{ row }">
            <el-progress
              :percentage="row.memoryUsagePercent"
              :color="getMemoryColor(row.memoryUsagePercent)"
              :stroke-width="8"
            />
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-wrapper">
        <el-pagination
          v-model:current-page="pagination.pageNum"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 清理历史数据对话框 -->
    <el-dialog
      v-model="cleanDialogVisible"
      title="清理历史数据"
      width="400px"
    >
      <el-form :model="cleanForm" label-width="100px">
        <el-form-item label="保留天数">
          <el-input-number
            v-model="cleanForm.days"
            :min="1"
            :max="365"
            placeholder="请输入保留天数"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="cleanDialogVisible = false">取消</el-button>
        <el-button type="danger" @click="cleanHistoryData" :loading="cleanLoading">
          确认清理
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {computed, onMounted, reactive, ref} from 'vue'
import {threadPoolMonitorApi} from '@/services/api'
import type {
  ApiResult,
  ExecutorStatisticsQueryDTO,
  ExecutorStatisticsVO,
  PageResult,
  ThreadPoolMonitorPO,
  ThreadPoolMonitorQueryDTO
} from '@/types/job'
import {ElMessage} from 'element-plus'
import {use} from 'echarts/core'
import {CanvasRenderer} from 'echarts/renderers'
import {BarChart, LineChart, PieChart} from 'echarts/charts'
import {GridComponent, LegendComponent, TitleComponent, TooltipComponent} from 'echarts/components'
import VChart from 'vue-echarts'

// 注册 ECharts 组件
use([
  CanvasRenderer,
  PieChart,
  BarChart,
  LineChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
])

// 响应式数据
const loading = ref(false)
const historyLoading = ref(false)
const cleanLoading = ref(false)
const statisticsLoading = ref(false)
const latestData = ref<ThreadPoolMonitorPO[]>([])
const historyData = ref<ThreadPoolMonitorPO[]>([])
const executorList = ref<string[]>([])
const appList = ref<string[]>([])
const selectedExecutor = ref('')
const selectedAppForHourly = ref('')
const dateRange = ref<[string, string] | null>(null)
const statisticsDate = ref(new Date().toISOString().split('T')[0])
const statisticsData = ref<ExecutorStatisticsVO | null>(null)

// 概览数据
const overview = reactive({
  executorCount: 0,
  appCount: 0,
  totalTasks: 0,
  avgMemoryUsage: 0
})

// 搜索表单
const searchForm = reactive({
  registerKey: '',
  appName: ''
})

// 分页信息
const pagination = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 0
})

// 清理对话框
const cleanDialogVisible = ref(false)
const cleanForm = reactive({
  days: 30
})

// 计算属性
const searchParams = computed(() => {
  const params: ThreadPoolMonitorQueryDTO = {
    pageNum: pagination.pageNum,
    pageSize: pagination.pageSize,
    registerKey: searchForm.registerKey || undefined,
    appName: searchForm.appName || undefined
  }

  if (dateRange.value) {
    params.startTime = dateRange.value[0]
    params.endTime = dateRange.value[1]
  }

  return params
})

// 执行器状态分布图表配置
const executorStatusChartOption = computed(() => {
  if (!statisticsData.value?.executorStatusStatistics) {
    return {
      title: {
        text: '执行器状态分布',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '执行器状态',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 0, name: '正常', itemStyle: { color: '#67c23a' } },
            { value: 0, name: '警告', itemStyle: { color: '#e6a23c' } },
            { value: 0, name: '错误', itemStyle: { color: '#f56c6c' } },
            { value: 0, name: '离线', itemStyle: { color: '#909399' } }
          ]
        }
      ]
    }
  }

  const { executorStatusStatistics } = statisticsData.value
  return {
    title: {
      text: '执行器状态分布',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '执行器状态',
        type: 'pie',
        radius: '50%',
        data: [
          { value: executorStatusStatistics.normalCount, name: '正常', itemStyle: { color: '#67c23a' } },
          { value: executorStatusStatistics.warningCount, name: '警告', itemStyle: { color: '#e6a23c' } },
          { value: executorStatusStatistics.errorCount, name: '错误', itemStyle: { color: '#f56c6c' } },
          { value: executorStatusStatistics.offlineCount, name: '离线', itemStyle: { color: '#909399' } }
        ]
      }
    ]
  }
})

// 任务统计图表配置
const taskStatisticsChartOption = computed(() => {
  if (!statisticsData.value?.taskExecutionStatistics) {
    return {
      title: {
        text: '任务执行统计',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '任务统计',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 0, name: '已完成', itemStyle: { color: '#67c23a' } },
            { value: 0, name: '失败', itemStyle: { color: '#f56c6c' } },
            { value: 0, name: '延迟', itemStyle: { color: '#e6a23c' } }
          ]
        }
      ]
    }
  }

  const { taskExecutionStatistics } = statisticsData.value
  return {
    title: {
      text: '任务执行统计',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '任务统计',
        type: 'pie',
        radius: '50%',
        data: [
          { value: taskExecutionStatistics.totalCompletedTasks, name: '已完成', itemStyle: { color: '#67c23a' } },
          { value: taskExecutionStatistics.totalFailedTasks, name: '失败', itemStyle: { color: '#f56c6c' } },
          { value: taskExecutionStatistics.totalDelayTasks, name: '延迟', itemStyle: { color: '#e6a23c' } }
        ]
      }
    ]
  }
})

// 小时统计图表配置
const hourlyChartOption = computed(() => {
  if (!statisticsData.value?.hourlyStatistics) {
    return {
      title: {
        text: '24小时执行趋势',
        left: 'center'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['执行器数量', '完成任务数', '平均内存使用率']
      },
      xAxis: {
        type: 'category',
        data: Array.from({ length: 24 }, (_, i) => i)
      },
      yAxis: [
        {
          type: 'value',
          name: '数量'
        },
        {
          type: 'value',
          name: '使用率(%)',
          max: 100
        }
      ],
      series: [
        {
          name: '执行器数量',
          type: 'line',
          data: Array(24).fill(0)
        },
        {
          name: '完成任务数',
          type: 'bar',
          data: Array(24).fill(0)
        },
        {
          name: '平均内存使用率',
          type: 'line',
          yAxisIndex: 1,
          data: Array(24).fill(0)
        }
      ]
    }
  }

  const hours = Array.from({ length: 24 }, (_, i) => i)
  const executorCounts = hours.map(hour => {
    const stat = statisticsData.value!.hourlyStatistics.find(s => s.hour === hour)
    return stat ? stat.executorCount : 0
  })
  const completedTasks = hours.map(hour => {
    const stat = statisticsData.value!.hourlyStatistics.find(s => s.hour === hour)
    return stat ? stat.completedTasks : 0
  })
  const memoryUsage = hours.map(hour => {
    const stat = statisticsData.value!.hourlyStatistics.find(s => s.hour === hour)
    return stat ? stat.averageMemoryUsage : 0
  })

  return {
    title: {
      text: '24小时执行趋势',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['执行器数量', '完成任务数', '平均内存使用率']
    },
    xAxis: {
      type: 'category',
      data: hours
    },
    yAxis: [
      {
        type: 'value',
        name: '数量'
      },
      {
        type: 'value',
        name: '使用率(%)',
        max: 100
      }
    ],
    series: [
      {
        name: '执行器数量',
        type: 'line',
        data: executorCounts,
        itemStyle: { color: '#409eff' }
      },
      {
        name: '完成任务数',
        type: 'bar',
        data: completedTasks,
        itemStyle: { color: '#67c23a' }
      },
      {
        name: '平均内存使用率',
        type: 'line',
        yAxisIndex: 1,
        data: memoryUsage,
        itemStyle: { color: '#e6a23c' }
      }
    ]
  }
})

// 获取内存使用率颜色
const getMemoryColor = (usage: number) => {
  if (usage < 60) return '#67c23a'
  if (usage < 80) return '#e6a23c'
  return '#f56c6c'
}

// 获取状态类型
const getStatusType = (row: ThreadPoolMonitorPO) => {
  const usage = row.memoryUsagePercent
  const queueUsage = row.queueSize / (row.queueSize + row.queueRemainingCapacity)

  if (usage > 80 || queueUsage > 0.8) return 'danger'
  if (usage > 60 || queueUsage > 0.6) return 'warning'
  return 'success'
}

// 获取状态文本
const getStatusText = (row: ThreadPoolMonitorPO) => {
  const usage = row.memoryUsagePercent
  const queueUsage = row.queueSize / (row.queueSize + row.queueRemainingCapacity)

  if (usage > 80 || queueUsage > 0.8) return '告警'
  if (usage > 60 || queueUsage > 0.6) return '注意'
  return '正常'
}

// 加载概览数据
const loadOverview = async () => {
  try {
    const response: ApiResult<any> = await threadPoolMonitorApi.getMonitorOverview()
    if (response.success) {
      Object.assign(overview, response.data)
    }
  } catch (error) {
    console.error('加载概览数据失败:', error)
  }
}

// 加载统计数据
const loadStatisticsData = async () => {
  statisticsLoading.value = true
  try {
    const params: ExecutorStatisticsQueryDTO = {
      queryDate: statisticsDate.value,
      appName: selectedAppForHourly.value || undefined,
      includeTaskStatistics: true,
      includeMemoryStatistics: true
    }

    const response: ApiResult<ExecutorStatisticsVO> = await threadPoolMonitorApi.queryExecutorStatistics(params)
    if (response.success) {
      statisticsData.value = response.data
    }
  } catch (error) {
    console.error('加载统计数据失败:', error)
  } finally {
    statisticsLoading.value = false
  }
}

// 加载执行器列表
const loadExecutorList = async () => {
  try {
    const response: ApiResult<string[]> = await threadPoolMonitorApi.getExecutorList()
    if (response.success) {
      executorList.value = response.data
    }
  } catch (error) {
    console.error('加载执行器列表失败:', error)
  }
}

// 加载应用列表
const loadAppList = async () => {
  try {
    const response: ApiResult<string[]> = await threadPoolMonitorApi.getAppList()
    if (response.success) {
      appList.value = response.data
    }
  } catch (error) {
    console.error('加载应用列表失败:', error)
  }
}

// 加载最新数据
const loadLatestData = async () => {
  loading.value = true
  try {
    let response: ApiResult<ThreadPoolMonitorPO[]>

    if (selectedExecutor.value) {
      response = await threadPoolMonitorApi.queryLatestMonitorData(selectedExecutor.value)
    } else {
      response = await threadPoolMonitorApi.queryAllLatestMonitorData()
    }

    if (response.success) {
      latestData.value = response.data
    }
  } catch (error) {
    console.error('加载最新数据失败:', error)
  } finally {
    loading.value = false
  }
}

// 加载历史数据
const loadHistoryData = async () => {
  historyLoading.value = true
  try {
    const response: ApiResult<PageResult<ThreadPoolMonitorPO>> = await threadPoolMonitorApi.queryMonitorData(searchParams.value)

    if (response.success) {
      historyData.value = response.data.records
      pagination.total = response.data.total
    }
  } catch (error) {
    console.error('加载历史数据失败:', error)
  } finally {
    historyLoading.value = false
  }
}

// 重置历史搜索
const resetHistorySearch = () => {
  searchForm.registerKey = ''
  searchForm.appName = ''
  dateRange.value = null
  pagination.pageNum = 1
  loadHistoryData()
}

// 处理分页大小变化
const handleSizeChange = (size: number) => {
  pagination.pageSize = size
  pagination.pageNum = 1
  loadHistoryData()
}

// 处理当前页变化
const handleCurrentChange = (page: number) => {
  pagination.pageNum = page
  loadHistoryData()
}

// 显示清理对话框
const showCleanDialog = () => {
  cleanDialogVisible.value = true
}

// 清理历史数据
const cleanHistoryData = async () => {
  cleanLoading.value = true
  try {
    const response: ApiResult<void> = await threadPoolMonitorApi.cleanHistoryData(cleanForm.days)

    if (response.success) {
      ElMessage.success('历史数据清理成功')
      cleanDialogVisible.value = false
      loadHistoryData()
    } else {
      ElMessage.error(response.message || '清理失败')
    }
  } catch (error) {
    console.error('清理历史数据失败:', error)
    ElMessage.error('清理失败')
  } finally {
    cleanLoading.value = false
  }
}

// 组件挂载时加载数据
onMounted(() => {
  loadOverview()
  loadExecutorList()
  loadAppList()
  loadLatestData()
  loadHistoryData()
  loadStatisticsData()
})
</script>

<style scoped>
.page-header {
  margin-bottom: 24px;
}

.header-content {
  display: flex;
  align-items: center;
}

.back-btn {
  margin-right: 16px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin: 0;
  display: flex;
  align-items: center;
}

.title-icon {
  margin-right: 8px;
  color: #409eff;
}

.overview-row {
  margin-bottom: 24px;
}

.overview-card {
  height: 120px;
}

.overview-item {
  display: flex;
  align-items: center;
  height: 100%;
}

.overview-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  font-size: 24px;
  color: white;
}

.executor-icon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.app-icon {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.task-icon {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.memory-icon {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.overview-content {
  flex: 1;
}

.overview-number {
  font-size: 28px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 4px;
}

.overview-label {
  font-size: 14px;
  color: #909399;
}

.chart-row {
  margin-bottom: 24px;
}

.chart-card {
  margin-bottom: 24px;
}

.chart-container {
  width: 100%;
  height: 100%;
}

.monitor-card,
.history-card {
  margin-bottom: 24px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-form {
  margin-bottom: 20px;
}

.pagination-wrapper {
  margin-top: 20px;
  text-align: right;
}

.fill-height {
  width: 80vw;
  max-width: 1400px;
  margin: 0 auto;
}

/* 现代化表格样式 */
.el-table {
  border: 2px solid #cbd5e1;
  border-radius: 0;
  box-shadow: 0 4px 12px rgba(30, 58, 138, 0.1);
  position: relative;
  overflow: hidden;
}


/* 表头样式 */
.el-table :deep(.el-table__header-wrapper) {
  background: #f1f5f9;
}

.el-table :deep(.el-table__header) {
  background: #f1f5f9;
}

.el-table :deep(.el-table__header th) {
  background: #f1f5f9 !important;
  color: #475569;
  font-weight: 600;
  font-size: 14px;
  padding: 16px 12px;
  border-bottom: 2px solid #cbd5e1;
  border-right: 1px solid #cbd5e1;
  text-align: left;
  position: relative;
}

.el-table :deep(.el-table__header th:last-child) {
  border-right: none;
}

/* 表格内容样式 */
.el-table :deep(.el-table__body-wrapper) {
  background: #ffffff;
}

.el-table :deep(.el-table__body tr) {
  background: #ffffff;
  transition: background-color 0.2s ease;
}

/* 隔行换色 */
.el-table :deep(.el-table__body tr:nth-child(even)) {
  background: #f8fafc;
}

.el-table :deep(.el-table__body tr:hover) {
  background: #eff6ff !important;
}

/* 单元格样式 */
.el-table :deep(.el-table__body td) {
  padding: 16px 12px;
  border-bottom: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
  font-size: 14px;
  color: #1e293b;
  text-align: left;
  position: relative;
}

.el-table :deep(.el-table__body td:last-child) {
  border-right: none;
}

/* 数字列右对齐 */
.el-table :deep(.el-table__body td[data-numeric="true"]) {
  text-align: right;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-weight: 500;
}

/* 状态标签样式 */
.el-table :deep(.el-tag) {
  border-radius: 0;
  font-weight: 600;
  padding: 4px 8px;
  border: 1px solid;
  position: relative;
}

.el-table :deep(.el-tag--success) {
  background: #f0fdf4;
  border-color: #22c55e;
  color: #15803d;
}

.el-table :deep(.el-tag--warning) {
  background: #fffbeb;
  border-color: #f59e0b;
  color: #d97706;
}

.el-table :deep(.el-tag--danger) {
  background: #fef2f2;
  border-color: #ef4444;
  color: #dc2626;
}

/* 进度条样式 */
.el-table :deep(.el-progress) {
  margin: 0;
}

.el-table :deep(.el-progress-bar__outer) {
  border-radius: 0;
  background: #e2e8f0;
  border: 1px solid #cbd5e1;
}

.el-table :deep(.el-progress-bar__inner) {
  border-radius: 0;
  transition: width 0.3s ease;
}

/* 关键数据标注 */
.el-table :deep(.el-table__body td[data-key="true"]) {
  position: relative;
}

.el-table :deep(.el-table__body td[data-key="true"]::before) {
  content: '◆';
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: #3b82f6;
  font-size: 12px;
  font-weight: bold;
}

/* 卡片样式优化 */
.el-card {
  border-radius: 0;
  border: 2px solid #e2e8f0;
  box-shadow: 0 4px 12px rgba(30, 58, 138, 0.1);
  overflow: hidden;
}

.el-card :deep(.el-card__header) {
  background: #f8fafc;
  border-bottom: 2px solid #e2e8f0;
  padding: 16px 20px;
}

.el-card :deep(.el-card__body) {
  padding: 20px;
}

/* 按钮样式优化 */
.el-button {
  border-radius: 0;
  font-weight: 600;
  border: 2px solid;
  transition: all 0.2s ease;
}

.el-button--primary {
  background: #3b82f6;
  border-color: #3b82f6;
}

.el-button--primary:hover {
  background: #2563eb;
  border-color: #2563eb;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}

/* 选择器样式优化 */
.el-select :deep(.el-input__wrapper) {
  border-radius: 0;
  border: 2px solid #e2e8f0;
  box-shadow: none;
}

.el-select :deep(.el-input__wrapper:hover) {
  border-color: #3b82f6;
}

/* 日期选择器样式优化 */
.el-date-picker :deep(.el-input__wrapper) {
  border-radius: 0;
  border: 2px solid #e2e8f0;
  box-shadow: none;
}

/* 分页样式优化 */
.el-pagination {
  margin-top: 20px;
  text-align: right;
}

.el-pagination :deep(.el-pager li) {
  border-radius: 0;
  border: 1px solid #e0e0e0;
  margin: 0 2px;
}

.el-pagination :deep(.el-pager li.is-active) {
  background: #409eff;
  border-color: #409eff;
  color: #ffffff;
}

/* 搜索表单样式优化 */
.search-form :deep(.el-form-item__label) {
  font-weight: 600;
  color: #2c3e50;
}

.search-form :deep(.el-input__wrapper) {
  border-radius: 0;
  border: 2px solid #e0e0e0;
  box-shadow: none;
}

.search-form :deep(.el-input__wrapper:hover) {
  border-color: #409eff;
}

/* 复选框组样式优化 */
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checkbox-label {
  font-size: 14px;
  color: #2c3e50;
  font-weight: 600;
}

.checkbox-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.checkbox-list :deep(.el-checkbox) {
  margin-right: 0;
}

.checkbox-list :deep(.el-checkbox__input) {
  border-radius: 0;
}

.checkbox-list :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background: #409eff;
  border-color: #409eff;
  border-radius: 0;
}
</style>


